<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>

<body>
    <div class="layui-form layuimini-form" lay-filter="form-filter">
        <div class="layui-form-item">
            <label class="layui-form-label required">技师ID</label>
            <div class="layui-input-block">
                <input type="number" name="id" lay-verify="required" lay-reqtext="技师ID不能为空" placeholder="请输入用户ID"
                    value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">预约日期</label>
            <div class="layui-input-block">
                <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">时间段</label>
            <div class="layui-input-block">
                <select name="timeQuantumId" lay-filter="timeQuantumSelect" id="timeQuantumSelect">
                    <option value="1">08:00 -- 10:00</option>
                    <option value="2">10:00 -- 12:00</option>
                    <option value="3">14:00 -- 16:00</option>
                    <option value="4">16:00 -- 18:00</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">技师费用</label>
            <div class="layui-input-block">
                <input type="number" name="money" lay-verify="required" lay-reqtext="请输入费用"  placeholder="请输入缴纳费用" value="100" class="layui-input">
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label required">预约状态id</label>
            <div class="layui-input-block">
                <select name="bookStatusId" lay-filter="bookStatusSelect" id="bookStatusSelect">
                    <option value="1">未支付</option>
                    <option value="2">已支付</option>
                    <option value="3">已完成</option>
                    <option value="4">已取消</option>
                    <option value="4">异常</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">添 加</button>
            </div>
        </div>

    </div>

    <!-- <script type="text/html" id="imgtmp">
    <img src="{{d.icon}}" style="height: 100%; width: 100%;" /> -->
    <!-- </script> -->

    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script.>
        /**
         * 对Date的扩展，将 Date 转化为指定格式的String
         * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
         * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
         * 例子：
         *      (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
         *      (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
         *
         * @param fmt
         * @returns {*}
         */
        Date.prototype.format = function(fmt){
            var o = {
                "M+": this.getMonth()+1,
                "d+": this.getDate(),
                "H+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "S+": this.getMilliseconds()
            };

            //因位date.getFullYear()出来的结果是number类型的,所以为了让结果变成字符串型，下面有两种方法：


            if(/(y+)/.test(fmt)){
                //第一种：利用字符串连接符“+”给date.getFullYear()+""，加一个空字符串便可以将number类型转换成字符串。

                fmt=fmt.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
            }
            for(var k in o){
                if (new RegExp("(" + k +")").test(fmt)){

                    //第二种：使用String()类型进行强制数据类型转换String(date.getFullYear())，这种更容易理解。

                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(String(o[k]).length)));
                }
            }
            return fmt;
        }

        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                laydate = layui.laydate,
                layer = layui.layer;

            //日期
            laydate.render({
                elem: '#date',
                type: 'date',
                done:function(value,date){
                    //value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                    if (value != "") {
                        let selectDate = new Date(value + "");
                        let nowDate = new Date(new Date().format("yyyy-MM-dd"));

                        if (selectDate < nowDate) {
                            layer.alert("别闹,你又不会穿越");
                            form.val("form-filter",{date:""})   //设置日期为空
                        }

                    }
                }

            });


            //监听提交
            form.on('submit(saveBtn)', function (data) {
                 console.log(data.field);
                 console.log(data);

                $.post('http://localhost:8080/api/book/addBook',
                    {
                        userId:data.field.userId,
                        doctorUserId:data.field.doctorUserId,
                        timeQuantumId:data.field.timeQuantumId,
                        message:data.field.message,
                        cost:data.field.cost,
                        bookStatusId:data.field.bookStatusId,
                        date:data.field.date
                    }
                    , function (result) {
                        if (result.code == 0) {
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);

                        } else {
                            layer.msg(result.msg);
                        }
                    }

                );

                return false;
            });


        });
    </script>

</body>

</html>